<!-- 地址 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="地址管理" />
    <aster-cell-group>
      <aster-cell
        v-for="(item, index) in addressList"
        :key="index"
        center
        clickable
        :name="item.id"
        :border="false"
        :customStyle="customStyle"
      >
        <template #icon>
          <view class="cell__icon" v-show="showIcon">
            <uni-icons
              custom-prefix="custom-icon"
              type="iconfont icon-xuanze1"
              class="cell__icon__selected"
              color="#fff"
              :size="20"
              v-if="item.default == '1'"
            />
          </view>
        </template>
        <template #title>
          <view class="cell__title">
            <text class="cell__title__text">{{ item.consignee }} {{ item.mobile }}</text>
            <uni-tag
              v-if="item.default == '1'"
              text="默认"
              type="primary"
              :circle="true"
              size="small"
            />
          </view>
        </template>
        <template #label>
          <view class="cell__label"> {{ getAreaName(item.area) }} {{ item.address }} </view>
        </template>
        <template #value>
          <view class="cell__value" @click="to_edit(item.id)">
            <uni-icons custom-prefix="custom-icon" type="iconfont icon-bianji" :size="20" />
          </view>
        </template>
      </aster-cell>
    </aster-cell-group>
    <view class="cell__btn">
      <button @click="to_add()">新建收货地址</button>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterCellGroup from '@/components/common/aster-cell-group.vue';
  import AsterCell from '@/components/common/aster-cell.vue';
  import { getAddressList } from '@/services/api/user/address';
  import { AddressModel } from '@/services/model/addressModel';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive, ref } from 'vue';
  import { areaList } from '@vant/area-data';
  import { area_list, area_text } from '@/utils';
  import { router } from '@/utils/router';
  import config from '@/utils/config';
  import { ResultEnum } from '@/enums/httpEnum';

  const addressList = ref<AddressModel[]>([]);
  const areaData = area_list(areaList);
  const showIcon = ref(false);
  const customStyle = reactive({
    borderRadius: '20rpx',
    margin: '10rpx 0',
    backgroundColor: '#fff',
  });

  onLoad((options: any) => {
    showIcon.value = options?.showIcon;
    getAddressList().then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) addressList.value = data.data;
    });
  });

  /** 地区码转地区名称 */
  const getAreaName = (area: string) => {
    return area_text(area, areaData, ' ');
  };

  const to_add = () => {
    router.push(config.route.address_edit + '?title=新增地址');
  };

  const to_edit = (id: number | undefined) => {
    router.push(config.route.address_edit + '?title=编辑地址&id=' + id);
  };
</script>
<style lang="scss" scoped>
  page {
    padding: 0 20rpx;
  }

  .cell {
    &__title {
      display: flex;
      flex-direction: row;
      align-items: center;

      &__text {
        font-size: 32rpx;
        line-height: 44rpx;
        margin-right: 10rpx;
      }
    }

    &__label {
      font-size: 26rpx;
      line-height: 32rpx;
      padding-top: 10rpx;
    }

    &__value {
      padding-left: 20rpx;
    }

    &__icon {
      padding: 10rpx;

      &__selected {
        color: #fff;
        background-color: #ff6a6c;
        border-color: #ff6a6c;
        border-radius: 50%;
      }
    }

    &__btn {
      margin: 20rpx 0;

      button {
        width: 100%;
        color: #fff;
        display: inline-block;
        font-size: 34rpx;
        background-color: #ff6a6c;
      }
    }
  }
</style>
